import { fontSize } from '@/units'

const areaStyle = ['rgba(22, 119, 255, 1)', 'rgba(101, 165, 255, .2)']
const lineStyle = ['#006AFF', '#FF6060']
const getMapValueArrayOfKey = (array, keyName) => {
  if (Object.prototype.toString.call(array) == '[object Array]') {
    return array.map((item) => {
      return item[keyName]
    })
  }
}
const Line3Option = ({ time, datalist, type, grid }) => {
  let legenddata = getMapValueArrayOfKey(datalist, 'name')
  let options
  if (type == 'economy') {
    options = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontSize: fontSize(0.16),
        },
      },
      legend: {
        selectedMode: false,
        x: 'center',
        icon: 'roundRect',
        bottom: '2%',
        itemWidth: 13,
        itemHeight: 7,
        itemGap: 28,
        align: 'right',
        data: [
          {
            name: legenddata[0],
            textStyle: {
              fontSize: fontSize(0.13),
              color: '#006AFF',
            },
          },
          {
            name: legenddata[1],
            textStyle: {
              fontSize: fontSize(0.13),
              color: '#FF6060',
            },
          },
        ],
      },
      grid: grid ? grid : { x2: 20 },
      xAxis: {
        type: 'category',
        data: time,
        axisPointer: {
          type: 'shadow',
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 22, 93, 0.1)',
          },
        },
        axisLabel: {
          color: 'rgba(0, 22, 93, 0.6)',
        },
        boundaryGap: false,
      },
      yAxis: [
        {
          type: 'value',
          splitNumber: 4,
          axisLabel: {
            show: true,
            formatter: function (value, index) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + '万'
              } else if (value >= 10000000) {
                value = value / 10000000 + '千万'
              } else if (value <= -10000 && value > -10000000) {
                value = value / 10000 + '万'
              } else if (value <= -10000000) {
                value = value / 10000000 + '千万'
              }
              return value
            },
            color: 'rgba(0, 22, 93, 0.6)',
          },
          axisTick: false,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0, 22, 93, 0.4)',
            },
          },
          splitLine: {
            lineStyle: {
              color: '#D4D6E1',
            },
          },
        },
        {
          type: 'value',
          splitNumber: 5,
          axisLabel: {
            show: false,
            formatter: function (value, index) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + '万'
              } else if (value >= 10000000) {
                value = value / 10000000 + '千万'
              } else if (value <= -10000 && value > -10000000) {
                value = value / 10000 + '万'
              } else if (value <= -10000000) {
                value = value / 10000000 + '千万'
              }
              return value
            },
            color: 'rgba(0, 22, 93, .6)',
          },
          axisTick: false,
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: datalist[0].name,
          data: datalist[0].data,
          type: 'line',
          symbol: 'circle',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: areaStyle[0],
                },
                {
                  offset: 1,
                  color: areaStyle[1],
                },
              ],
            },
          },
          symbolSize: 8,
          lineStyle: {
            color: lineStyle[0],
          },
          itemStyle: {
            color: lineStyle[0],
          },
        },
        {
          name: datalist[1].name,
          yAxisIndex: 1,
          data: datalist[1].data,
          type: 'line',
          symbol: 'circle',
          smooth: true,
          symbolSize: 8,
          lineStyle: {
            color: lineStyle[1],
          },
          itemStyle: {
            color: lineStyle[1],
          },
        },
      ],
    }
  } else {
    options = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          fontSize: fontSize(0.16),
        },
      },
      grid: grid
        ? grid
        : {
            top: 30,
            left: 0,
            right: 30,
            bottom: '15%',
            containLabel: true,
          },
      legend: {
        //x: 'center',
        bottom: '0',
        itemWidth: fontSize(0.2),
        itemHeight: fontSize(0.1),
        icon: 'rect',
        textStyle: {
          color: lineStyle,
          fontSize: fontSize(0.16),
        },
      },
      xAxis: {
        type: 'category',
        data: time,
        axisPointer: {
          type: 'shadow',
        },
        boundaryGap: false,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#00165D',
          fontSize: fontSize(0.16),
        },
        splitLine: {
          lineStyle: {
            color: '#00165D',
          },
        },
      },
      yAxis: [
        {
          type: 'value',
          // name: legenddata[0],
          name: '',
          nameTextStyle: {
            align: 'left',
            color: 'rgba(0, 22, 93, 0.6)',
          },
          splitNumber: 4,
          axisLabel: {
            show: true,
            formatter: function (value, index) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + '万'
              } else if (value >= 10000000) {
                value = value / 10000000 + '千万'
              } else if (value <= -10000 && value > -10000000) {
                value = value / 10000 + '万'
              } else if (value <= -10000000) {
                value = value / 10000000 + '千万'
              }
              return value
            },
            color: '#00165D',
            fontSize: fontSize(0.16),
          },
          axisLine: {
            //y轴
            show: false,
            lineStyle: {
              color: '#00165D',
              width: 0.5, //线宽
              type: 'dotted',
            },
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 22, 93, 0.1)',
            },
          },
        },
        {
          type: 'value',
          // name: legenddata[1],
          name: '',
          nameTextStyle: {
            align: 'right',
            color: '#00165D',
          },
          splitNumber: 4,
          axisLabel: {
            align: 'right',
            show: true,
            //interval: 20,
            formatter: '{value}',
            fontSize: fontSize(0.16),
          },

          axisLine: {
            //y轴
            show: false,
            lineStyle: {
              color: '#00165D',
              width: 0.5, //线宽
              type: 'dotted',
            },
          },
          // min: 0,
          // max: 100,
          // interval: 20,
          offset: 36,
          // 设置轴线的属性
          // axisLabel: {
          //   //纵坐标的字体样式
          //   textStyle: {
          //     color: '#8D93A7',
          //   },
          // },

          splitLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0, 22, 93, 0.1)',
            },
          },
        },
      ],
      series: [
        {
          name: datalist[0].name,
          data: datalist[0].data,
          type: 'line',
          symbol: 'circle',
          showSymbol: false,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: areaStyle[0],
                },
                {
                  offset: 1,
                  color: areaStyle[1],
                },
              ],
            },
          },
          symbolSize: 8,
          lineStyle: {
            width: 0,
            color: lineStyle[0],
          },
          itemStyle: {
            color: lineStyle[0],
          },
        },
        {
          name: datalist[1].name,
          yAxisIndex: 1,
          data: datalist[1].data,
          type: 'line',
          symbol: 'circle',
          smooth: false,
          symbolSize: 8,
          lineStyle: {
            color: lineStyle[1],
          },
          itemStyle: {
            color: lineStyle[1],
          },
        },
      ],
    }
  }
  return options
}

export { Line3Option }
